<template>
    <div id="seachDialog">
      <a-modal
        title="添加团队成员"
        v-model="departData.show"
        width="550px"
        style="overflow:hidden"
        @cancel="handleClose">
        <el-row style="padding: 30px 40px">
          <el-col :span="24">
            <a-input-search style="margin-bottom: 8px" placeholder="请输入查询内容" @change="onChange" />
            <a-tree
              showLine
              @expand="onExpand"
              :expandedKeys="expandedKeys"
              :autoExpandParent="autoExpandParent"
              :treeData="gData"
              @select="this.onSelect"
            >

              <template slot="title" slot-scope="{title}">
                <span v-if="title.indexOf(searchValue) > -1">
                  {{title.substr(0, title.indexOf(searchValue))}}
                  <span style="color: #f50">{{searchValue}}</span>
                  {{title.substr(title.indexOf(searchValue) + searchValue.length)}}
                </span>
                <span v-else>{{title}}</span>
              </template>
            </a-tree>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="handleSend">确定</el-button>
            <el-button size="small" @click="handleClose">取消</el-button>
        </span>
      </a-modal>
    </div>
</template>

<script>
const gData = [];

const getParentKey = (key, tree) => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some(item => item.key === key)) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};
export default {
    props: ['departData','treeData'],
    data() {
        return {
          departmentId: '',
          expandedKeys: [],
          searchValue: '',
          autoExpandParent: true,
          gData,
          treeList: [],
          input3: '',
        };
    },
    computed: {
      
    },
    created() {

    },
    mounted() {
      
    },
    watch: {

    },
    methods: {
      onExpand(expandedKeys) {
        console.log()
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      onSelect(selectedKeys, info) { //点击菜单树节点获取当前点击的部门
        if(selectedKeys.length != 0) {
          var node = info.selectedNodes[0].data.props.dataRef //菜单数据
          this.departmentId = node.id
        }
      },
      onChange(e) { //输入树搜索的变化
        const value = e.target.value;
        const expandedKeys = this.treeList.map(item => {
            if (item.title.indexOf(value) > -1) {
              return getParentKey(item.key, this.gData);
            }
            return null;
          })
          .filter((item, i, self) => item && self.indexOf(item) === i);
        Object.assign(this, {
          expandedKeys,
          searchValue: value,
          autoExpandParent: true,
        });
      },
      handleSend () { //保存
        if (this.departmentId == '') {
          this.$alert('请选择部门','提示')
          return false
        }
        let userIdList = []
        this.departData.userIdList.forEach(el=>{
          userIdList.push(el.id)
        })
        this.$post(this.$api.postProviderOrganizationSetUserDepartment,{
          departmentId: this.departmentId,
          userIdList: userIdList
        }).then(response => {
          if (response.data.succeed) {
            this.$emit('checkUser')
            this.handleClose()
          }
        })
      },
      generateList (data) { //树的搜索
        for (let i = 0; i < data.length; i++) {
          const node = data[i];
          const key = node.key;
          this.treeList.push({ key, title: node.title });
          if (node.children) {
            this.generateList(node.children, node.key);
          }
        }
      },
      handleClose () {
        this.departData.show = false
      }
    },
    computed: { //计算属性
    changeDialog () {
      return this.departData.show
      }
    },
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.gData = this.treeData
            this.generateList(this.gData)
          } else {
            this.departmentId = ''
          }
        }
      },
      deep: true
    }
};
</script>
